重點

使用MUI元件庫提供的CssBaseline API即可渲染CSS設定至整個網頁

目錄

• 前情提要
• 適用情境
• 發生原因
• 解決方法
• 參考文章

前情提要

• MUI元件庫提供簡潔設定的元件，該元件庫涵蓋所有使用者介面所需的元件，且功能相當完整。元件也容許一定程度的客製化(如:顏色、字型和字體大小等設定)，整體來說相當不錯用，詳細說明請參考MUI官方網站。
• 什麼是ThemeProvider?
  MUI元件庫中用來傳遞CSS主題(theme)的API。你可以事先設定一系列CSS style至主題(theme)中，並由ThemeProvider傳遞至各元件中，如:字型和顏色，甚至針對各種元件設定不同的CSS style，所以你可以透過ThemeProvider達成切換網站淺色/深色模式的功能。請參考MUI ThemeProvider官方文件說明。

適用情境

createTheme完成主題設定並使用ThemeProvider渲染主題後，開發者發現主題設定僅套用至元件上，卻無法改變背景顏色。

發生原因

MUI的ThemeProvider可以簡單改變MUI元件的CSS設定(畢竟就是MUI原生提供的API)。除此之外，MUI的ThemeProvider還可以設定網頁原始CSS，以達到建立統一外觀的目的(最常使用的就是改變背景顏色)。然而，ThemeProvider未有改變網頁原始CSS的能力，所以導致網頁原始CSS未隨著設定改變。

解決方法

此時，開發者需要導入CssBaseline API來重新設定網頁原始CSS，並讓ThemeProvider發揮作用。 詳細說明請參考CssBaseline官方文件說明

參考文章

• CssBaseline官方文件說明